<template>
	<view class="addOrder_page">
		<view class="product_list">
			<view class="list_wrap">
				<!-- <view class="title">请选择录入订单的类型<text class="tips">了解录件注意事项？</text></view> -->
				<view class="list_con">
					<view class="item" :class="item.value == orderItemActive? 'active': ''" v-for="(item,index) in list" :key="index"
						@click="itemOnClick(item.value)">{{item.text}}</view>
				</view>
			</view>
		</view>
		<view class="product_intro">
			<view class="title">产品说明<text class="tips">了解录件注意事项？</text></view>
			<view class=" proDet clearfix">
				<block v-if="moveCode!== null">
					<rich-text :nodes="moveCode"></rich-text>
				</block>
			</view>
		</view>
		
		<view class="product_main">
			<view class="title">申请信息</view>
			<template01 ref="child" :productId = "productId"></template01>
			<wyb-button class="btn" :ripple="true" type="filled" color="#585cf7"
			:radius="radius" width="100%" height="80rpx" font-size="32rpx" @click="newOrder"
				>提交</wyb-button> 
		</view>
	</view>
</template>

<script>
	import template01 from "./template/template01.vue"
	export default {
		components:{template01},
		data() {
			return {
				radius:["100px"],
				list: [],
				orderItemActive: 0,
				moveCode: "",
				appInputType: "",
				productId: null,
			}
		},
		onLoad(option){
			//根据传参产品(ID)获取页面基本信息
			this.productId = option.id;
			this.getBaseInfo(option.id);
		},
		methods: {
			//获取产品
			getBaseInfo(id) {
				this.$api.getProductList(id).then( res => {
					this.list = res.data.data;
					this.orderItemActive = id || this.list[0].value;
					//根据产品id获取介绍
					this.getOrderIntroduce(id);
				})
			},
			//获取产品介绍
			getOrderIntroduce(id){
				let productId = id ||this.list[0].value;
				this.productId = productId;
				this.$api.getProductIntroById(productId).then(res=> {
					console.log(res);
					let resData = res.data.data;
					this.moveCode = resData.moveCode;
					this.appInputType = resData.appInputType;
				})
			},
			//产品点击事件
			itemOnClick(id){
				this.orderItemActive = id;
				this.productId = id;
				this.getOrderIntroduce(id);
			},
			//添加订单
			newOrder() {
				this.$refs.child.submit()
			}
		}
	}
</script>

<style>
page{background: #F8F8F8;}
</style>
<style lang="scss" scoped>
	.title{font-size: 32rpx;color: #333333;font-weight: bold;;line-height: 40rpx;display: flex;justify-content:space-between;}
	.tips{font-size: 22rpx;font-weight: 500;color: #585CF7;}
	.product_list{width: 750rpx;margin: 0 auto 20rpx;background: $dtg-color-primary;
		.list_wrap{padding: 20rpx 6rpx 0 30rpx;background: #FFFFFF; border-radius:20rpx 20rpx 0 0 ;}
		.list_con{padding: 10rpx 0 20rpx 0;width: 100%;display: flex;flex-wrap: wrap;justify-content: space-around;margin-top: 20rpx;}
		.item{margin-right: 24rpx;width: calc((100% - 24rpx * 4) / 4); margin-bottom: 30rpx;height: 56rpx;
            background-color: #FFFFFF;border-radius: 6rpx;border: 1px solid #DDD;color: #333333;font-size: 26rpx;
            display: flex; align-items: center;justify-content: center;}
		.list_con:after {content: "";flex: auto}
		.item.active{border: 1px solid #585CF7;color: #585CF7;background: #EEEEFE;}
	}
	.product_intro{width: 750rpx;margin: 0 auto 20rpx;background:#FFFFFF;padding: 40rpx 30rpx;}
	.product_main{
		width: 750rpx;margin: 0 auto 20rpx;background:#FFFFFF;padding: 40rpx 30rpx;
		.btn{margin-top: 40rpx;}
	}
    
</style>